<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>疫情数据可视化后台登录</title>
    <link rel="stylesheet" href="/lib/dedecms/css/login.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/lib/captcha/css/captcha.css">
    <script src="/lib/dream-msg/js/dream-msg.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/lib/captcha/js/validate.js"></script>
    <script src="/lib/jsencrypt/js/jsencrypt3.2.1.min.js"></script>
</head>

<body>
    <div id="particles-js">
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
    </div>
    <div class="tx-login-box">
        <div class="header-box">
            <div>疫情数据可视化后台</div>
        </div>
        <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
        <ul class="tx-form-li row">
            <li class="col-24 col-m-24">
                <p><input type="text" id="edtUserName" name="username" autocomplete="off" placeholder="Username"
                        class="tx-input"><i>账号(*)</i></p>
            </li>
            <li class="col-24 col-m-24">
                <p><input type="password" id="edtPassWord" name="password" placeholder="Password"
                        class="tx-input"><i>密码(*)</i></p>
            </li>
            <li class="col-24 col-m-24">
                <p><input class="btn validate-get" type="button" value="点击验证" onclick="getValidation()" /></p>
            </li>
            <li class="col-24 col-m-24">
                <p class="tx-input-full"><button type="submit" id="loginbtnPost" name="loginbtnPost"
                        onclick="userLogin()" class="tx-btn tx-btn-big bg-black">登录</button></p>
            </li>
            <li class="col-12 col-m-12">
                <p><a onclick="userRegister()" class="f-12 f-gray">新用户注册</a></p>
            </li>
            <li class="col-12 col-m-12">
                <p class="ta-r"><a onclick="forgetPassword()" class="f-12 f-gray">忘记密码</a></p>
            </li>
        </ul>
        <div class="before-send">
            <div class="before-send-top">
                <div>请在下图<span>依次</span>点击:</div>
                <img src="" />
            </div>
            <div class="before-send-body">
                <div class="validate-zone" onclick="zoneClick()">
                    <div class='validate-tooMuch'>
                        <div class="tooMuch-icon"></div>
                    </div>
                </div>
            </div>
            <div class="before-send-bottom">
                <div id="validate-close" onclick="closeValidation()"></div>
                <div id="validate-refresh" onclick="refreshValidation()"></div>
                <div id="validate-submit" onclick="submitValidation()">确认</div>
            </div>
        </div>
    </div>
    <script src="/lib/dedecms/js/login.js"></script>
    <script src="/lib/dedecms/js/loginApp.js"></script>
    <script>
        function userRegister() {
            Dreamer.warning("如需参加后台管理，请联系后台管理员哦~");
        }
        function forgetPassword() {
            Dreamer.error("忘记用户名或者密码，请联系后台管理员哦~");
        }
        function userLogin() {
            //validateResult由外部导入;
            const username = $("input[name='username']").val();
            const password = $("input[name='password']").val();
            if (username == "" || password == "") {
                Dreamer.error("用户名和密码不能为空~");
                return;
            }
            if (!validateResult) {
                Dreamer.error("你还没有通过人机验证哦~");
                return;
            }
            const getPublicKey = new Promise((resolve, reject) => {
                //获取公钥
                $.ajax({
                    //url: "https://visualization.admin.nightowl.top/v1/admin/login",
                    url: "/v1/publicKey",
                    method: "GET",
                    success: (res) => {
                        if (!res.code) {
                            resolve(res.data);
                        } else {
                            reject(res.msg);
                        }
                    },
                    fail: (err) => {
                        console.log("发送请求失败：", err);
                        Dreamer.error("登陆失败，请检查你的网络等问题哦~");
                    },
                })
            });
            getPublicKey.then((res) => {
                //前端数据加密上传
                new Promise((resolve, reject) => {
                    var jsencrypt = new JSEncrypt();
                    jsencrypt.setPublicKey(res.public_key);
                    const userInfo = new Object({
                        username: username,
                        password: password
                    });
                    $.ajax({
                        //url: "https://visualization.admin.nightowl.top/v1/admin/login",
                        url: "/v1/login",
                        method: "POST",
                        data: {
                            secret_code: jsencrypt.encrypt(JSON.stringify(userInfo)),
                        },
                        success: (res) => {
                            if (!res.code) {
                                resolve(res.data);
                            } else {
                                reject(res.msg);
                            }
                        },
                        fail: (err) => {
                            console.log("发送请求失败：", err);
                            Dreamer.error("服务端错误~");
                        },
                    })
                }).then((res2) => {
                    Dreamer.success("登陆成功~");
                    setTimeout(() => {
                        window.location.href = "/admin/index";
                    }, 2000);
                }).catch((err2) => {
                    Dreamer.error(err2);
                });
            }).catch((err) => {
                console.log("请求失败,失败原因：", err);
                Dreamer.error(err);
            })
        }
    </script>
    <script src="/js/cookie-login.js"></script>
</body>

</html>